<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>https://cn.vuejs.org/v2/guide/forms.html</title>
    <link rel="stylesheet" href="bootstrap.css">
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div class="container" id="box">
    <div class="col-lg-12">
        <div class="h2 text-center text-primary">
            表单控件绑定
        </div>
    </div>
    <div class="col-lg-12">
        <div class="form-group">
            <input class="form-control" v-model="message" placeholder="input message .. ">
        </div>
        <div class="form-group">
            <div class="text-success form-control"> {{ message }}</div>
        </div>
        <div class="form-group">
            <textarea class="form-control" name="" id="" cols="30" rows="5" v-model="message"
                      placeholder="input message.."></textarea>
        </div>
        <div class="form-group">
            <input type="checkbox" v-model="checked">
            {{ checked }}
        </div>
        <div class="form-group">
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
            {{ checkedNames }}
        </div>
        <div class="form-group">
            <label for="zing">zing</label>
            <input type="radio" name="radio" v-model="radioName" id="zing" value="zing">
            <label for="zzzz">zzzz</label>
            <input type="radio" name="radio" v-model="radioName" id="zzzz" value="zzzz">
            <label for="zhang">zhang</label>
            <input type="radio" name="radio" v-model="radioName" id="zhang" value="zhang">
            {{ radioName }}
        </div>
        <div class="form-group">
            <select class="form-control" title="" v-model="selectName" name="">
                <option value="a">a</option>
                <option value="b">b</option>
                <option value="c">c</option>
                <option value="d">d</option>
                <option value="e">e</option>
            </select>
            {{ selectName }}
        </div>

        <div class="form-group">
            <select class="form-control" multiple title="" v-model="selectNames" name="">
                <option value="a">a</option>
                <option value="b">b</option>
                <option value="c">c</option>
                <option value="d">d</option>
                <option value="e">e</option>
            </select>
            {{ selectNames }}
        </div>

    </div>
</div>
</body>
</html>
<script>
    new Vue({
        el: "#box",
        data: {
            message: undefined,
            checked: true,
            checkedNames:[],
            radioName:undefined,
            selectName:"a",
            selectNames:[]
        }
    })
</script>
